import React from 'react'
import {List} from 'antd'
import { Divider,  Layout,Collapse,Row,Col } from 'antd'
import 'antd/dist/antd.css'

import reqwest from 'reqwest';

const { Panel } = Collapse

let UNLISTEN
class Recommender extends React.Component {
   
    state = {
        initLoading: true,
        userId: null,
        userData:{},
        bookList: [],
        sites:[]

    };
 
    componentDidMount() {
        
                let tempId=this.props.match.params.id
                console.log(this.props.location)
                this.getData(tempId) 
               
    }
    
    componentWillReceiveProps(nextProps, nextContext) {
        console.log(nextProps)
        // 判断uuid是否改变。如果没有改变直接return；如果改变了做你想做的事情
        if (this.props.match.params.id === nextProps.match.params.id) {
            return
        } else {
            this.getData(nextProps.match.params.id )
         
        }
    }

    getData = (id) => {
        reqwest({
            url: `https://lessreads.com/renren-admin/api/recomuser/info/${id}`,
            type: 'json',
            method: 'get',
            contentType: 'application/json',
            success: res => {
                this.setState({
                    initLoading: false,
                    userData:res.recomUserVO.recomUser,
                    sites:res.recomUserVO.recomUser.siteUrls,
                    bookList:res.recomUserVO.recomEvaluationList
                    }
                );
                console.log(res)
            },
        });
    };

    render() {
        const{bookList,userData}=this.state
        return (
            <Layout style={{backgroundColor:"white"}}> 
                <div style={{backgroundColor:"white"}} className="recommender" >                                  
                    <div className="recommmender-img">
                            <img width="120px" src={userData.avatarUrl}
                            alt={userData.name}  className="radius"/>
                    </div>

                    <div className="recommender-nametagsites">
                        <span className="font16 bolder gray">{userData.name}
                        </span>
                        <div className="tips ">
                            <span>{userData.tag}</span>   
                        </div>
                        <div>
                            <List                                            
                                dataSource={userData.siteUrlList}
                                renderItem={items=> (
                                    <List.Item >
                                        <div >
                                        <span className="font12px"><a href={items.url} target="_blank" >{items.name}</a></span>
                                        </div>
                                    
                                    </List.Item>
                                )}
                                /> 
                        </div>  
                    </div>
        
                     <div className="recommender-introduce">
                      <div style={{fontSize:"12px",verticalAlign: "middle", display: "table-cell"}}>{userData.intro}</div>
                    </div>

                </div>


                    <div className="book-list">
                       <div className="marignbottom0">  
                                <span className="bold gray">TA的书单总共有 {bookList.length} 本</span>
                                </div>
                        <Divider className="divider" >
                            </Divider>
                        <List className="margintop0"
                            itemLayout="horizontal"
                            dataSource={bookList}
                            renderItem={item => (
                                <List.Item >
                                    <div className="content-list1">
                                    <div className="content-list-top-2">
                                        <div className="content-list-img">
                                            <a href={item.recomBookEntity.linkUrl} target="_blank">
                                                <img width="60px" src={item.recomBookEntity.bannerUrl}
                                                        alt={item.recomBookEntity.title}/>
                                            </a>
                                        </div>

                                        <div className="content-list-content-3">
                                            <div className="source1" >
                                                <a href={item.recomBookEntity.linkUrl}
                                                        className="book-title">{item.recomBookEntity.title} </a>
                                                <a href={item.recomBookEntity.linkUrl}
                                                        className="book-subtitle"> {item.recomBookEntity.subTitle}</a>
                                          </div>
                                            <div className="tips-2">
                                                <span>来自:&nbsp; <span
                                                    className="recomSource">{item.recommandSource}</span></span>
                                                <span>推荐于{item.recommendTime}</span>
                                                <span><a href={item.sourceUrl} target="_blank" >{item.sourceUrl ? "穿越去源地址":""}</a></span>
                                            </div>

                                            <Collapse defaultActiveKey={['2']}  ghost="false" className="collapse">
                                                <Panel showArrow={false}  header="Ta对本书的推荐语" key="1">
                                                <p className="recwords" style={{fontFamily:"tahoma,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif,TNYAdobeCaslonPro,Times New Roman,Times"}}
                                                        rel="noopener noreferrer" 
                                                        dangerouslySetInnerHTML={{__html: item.content}}>
                                                    </p> 
                                                </Panel>
                                        
                                            </Collapse>
                                            
                                            </div>

                                    
                                    </div>
                                    </div>
                                
                                </List.Item>
                            )}
                    />
                </div>  
                
     </Layout>
             
        )
    }
}

export default Recommender;
